
<template>
  <div>
    <div id="loading-screen" style="
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 1000;
        align-items: center;
        justify-content: center;
        display: none;" :style="{
          background: backgroundColor
        }">

      <img src="sprite/LogoGif.gif" alt="Loading..." id="loading-logo" class="gugu_zaza" />

    </div>
    <div id="phaser-container"></div>
  </div>


  <top-menu></top-menu>
  <bottom-menu></bottom-menu>
  <left-menu></left-menu>
</template>

<script lang="ts">
import 'phaser';
import { defineAsyncComponent } from 'vue';

import { mapActions, mapState } from 'pinia';
import { useKanvasoStore } from '../../stores/kanvaso';
import { useUiStore } from '../../stores/UI';
import { Router } from 'vue-router';
import { KanvasojKanvaso } from '../../types/stores/kanvaso';
import { getPhaserConfig } from './PhaserConfig';

import { EventBus } from '../../boot/eventBus';
import { EndlessCanvas } from './EndlessCanvas';
import { COLOR_BACKGROUND } from '../kanbans/Const';


// import { LoadingAnimation } from './LoadingAnimation';
import { usePhaserStore } from '../../stores/phaserStore';


export declare const window: {
  router: Router;
} & Window;

const config = getPhaserConfig([
  EndlessCanvas,
  // LoadingAnimation
]);
// export default {

// };

export default {
  name: 'EndlessCanvas',
  components: {
    topMenu: defineAsyncComponent(() =>
      import('../../components/topMenu.vue')
    ),
    bottomMenu: defineAsyncComponent(() =>
      import('../../components/bottomMenu.vue')
    ),
    leftMenu: defineAsyncComponent(() =>
      import('../../components/leftMenu.vue')
    ),

  },
  data() {
    return {
      wsSubscribe: null,
      game: null,
    };
  },
  computed: {
    ...mapState(useKanvasoStore, {
      project: 'getKanvaso',
    }),
    ...mapState(useUiStore, {
      backgroundColor: 'color'
    }),
    currentProject() {
      return this.project ? this.project[0]?.node : null;
    },
    projectUuid() {
      return this.$route?.params?.uuid || '';
    },

  },

  methods: {
    ...mapActions(useKanvasoStore, [
      'onGetKanvasoFull',
      'onEditKanvasoObjekto',
      'onEditKanvaso',
      'onEditKanvasoLigilo',
      'onGetKanvasoObjekto',
      'onKanvasoSubscribe', 'clearKanvasoStore'
    ]),
    ...mapActions(usePhaserStore, ['setGame', 'setSceneReady', 'clearPhaserStore', 'setScene']),

    ...mapActions(useUiStore, [
      'getColor',
      'setColor'
    ]),

    resizeHandler() {
      // const container = document.getElementById('phaser-container');
      // container.style.width = `${window.innerWidth}px`;
      // container.style.height = `${window.innerHeight}px`;
      this.game.scale.resize(window.innerWidth, window.innerHeight);
    },



    async initPhaserGame(): Promise<void> {
      this.game = new Phaser.Game(config);
      this.setGame(this.game);
      await new Promise((resolve) => {
        this.game.events.on('ready', () => {
          resolve('ready');
        });
      });
      this.setSceneReady(true);
      this.setScene(this.game.scene.keys['endless-canvas']);
    }
  },
  async mounted() {
    interface KanvasojKanvasoResult {
      data?: {
        kanvasojKanvaso?: KanvasojKanvaso;
      };
    }
    this.getColor();
    // this.setColor(0xabcdef);
    document.getElementsByTagName('body')[0].style.overflow = 'hidden';
    document.getElementById('loading-screen').style.display = 'flex';


    await this.onGetKanvasoFull({ uuid: this.projectUuid })
      .then((result: KanvasojKanvasoResult) => {
        if (!result.data.kanvasojKanvaso.edges.length) {
          throw new Error(result.toString());
        }
        this.onKanvasoSubscribe({
          kanvasoj: [this.currentProject.objId],
        }).then((data: any) => {
          this.wsSubscribe = data;
        });
      })
      .catch((err: any) => {
        console.log('error get kanvaso full :>> ', err);
        this.$router.replace({ name: 'projects' });
      });
    await this.onGetKanvasoObjekto({ kanvaso_Uuid: this.projectUuid });

    window.addEventListener('resize', this.resizeHandler);
    window.router = this.$router;
    this.initPhaserGame();
  },
  beforeUnmount() {
    this.wsSubscribe.unsubscribe();
    document.getElementsByTagName('body')[0].style.overflow = 'auto';
    EventBus.$destroy();
    this.game.destroy();
    delete window.router;
    this.clearKanvasoStore();
    this.clearPhaserStore();
  },



};
</script>
<style>
.gugu_zaza {
  width: 250px;
}

@media (max-width: 1280px) {
  .gugu_zaza {
    width: 200px;
  }
}

@media (max-width: 720px) {
  .gugu_zaza {
    width: 150px;
  }
}

@media (max-width: 360px) {
  .gugu_zaza {
    width: 52.5px;
  }
}

#phaser-container>canvas {
  margin-top: 0 !important;
}
</style>
